<template>
    <div class="app-container">

        <el-form
            ref="queryParamsRef"
            :model="queryParams"
            inline
            label-position="left"
            label-width="auto"
        >
            <el-form-item label="办案单位：" prop="unitId">
                <DepartmentCascader v-model="queryParams.unitId" @change="getDataList"/>
            </el-form-item>
            <el-form-item label="发布时间：">
                <el-date-picker
                    v-model="searchTime"
                    end-placeholder="截止时间"
                    range-separator="-"
                    start-placeholder="开始时间"
                    type="daterange"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    @change="changeDateTimerHandle"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getDataList">
                    <el-icon class="me-1">
                        <Search/>
                    </el-icon>
                    查询
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetQueryParamsHandle(queryParamsRef)">
                    <el-icon class="me-1">
                        <Refresh/>
                    </el-icon>
                    重置
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" @click="exportHandleXlsx('警务动态报告')">
                    <el-icon class="me-1">
                        <Download/>
                    </el-icon>
                    导出
                </el-button>
            </el-form-item>
        </el-form>

        <el-divider class="mt-0"/>

        <el-row class="mb-3">
            <el-col :span="24">
                <el-space>
                    <el-button plain type="primary" @click="PoliceServiceWeekReportRef.showAddHandle()">
                        <el-icon class="me-2">
                            <Plus/>
                        </el-icon>
                        新增
                    </el-button>
                </el-space>
            </el-col>
        </el-row>

        <el-table
            ref="tableDataRef"
            v-loading="loading"
            :data="tableData"
            :default-sort="defaultSort"
            border
            stripe
            :row-style="tableRowStyle"
            show-overflow-tooltip
            @sort-change="handleSortChange"
        >
            <el-table-column type="index" width="50"/>
            <el-table-column :sort-orders="sortOrders" label="发布单位" prop="unitName" sortable="unitName"/>
            <el-table-column :sort-orders="sortOrders" label="发布人员" prop="addUserName" sortable="addUserName"/>
            <el-table-column :sort-orders="sortOrders" label="发布日期" prop="adddate" sortable="adddate"/>
            <el-table-column :sort-orders="sortOrders" label="报告开始日期" prop="startdate" sortable="startdate"/>
            <el-table-column :sort-orders="sortOrders" label="报告结束日期" prop="enddate" sortable="enddate"/>
            <el-table-column label="警务基本信息" prop="basicinfo"/>
            <el-table-column label="重要警务信息" prop="importantinfo"/>
            <el-table-column label="日常工作信息" prop="dailyinfo"/>
            <el-table-column :sort-orders="sortOrders" label="状态" prop="stateText" sortable="stateText"/>
            <el-table-column align="center" label="操作" width="200">
                <template #default="scope">
                    <el-button
                        v-if="scope.row.state ==='0' || scope.row.adduserId === unifiedUserId"
                        link
                        size="small"
                        type="primary"
                        @click="PoliceServiceWeekReportRef.showEditHandle(scope.row)"
                    >
                        <el-icon class="me-1">
                            <Edit/>
                        </el-icon>
                        编辑
                    </el-button>
                    <!--                    v-if="scope.row.state ==='0'"-->
                    <el-button
                        v-if="scope.row.state ==='0' || scope.row.adduserId === unifiedUserId"
                        link
                        size="small"
                        type="danger"
                        @click="deleteHandle(scope.row)"
                    >
                        <el-icon class="me-1">
                            <Delete/>
                        </el-icon>
                        删除
                    </el-button>
                    <el-button
                        link
                        size="small"
                        type="primary"
                        @click="PoliceServiceWeekReportRef.showDetailHandle(scope.row)"
                    >
                        <el-icon class="me-1">
                            <View/>
                        </el-icon>
                        详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            v-model:limit="paging.pageSize"
            v-model:page="paging.pageNum"
            :total="total"
            @pagination="getDataList"
        />

        <AddAndEditPoliceServiceWeekReport ref="PoliceServiceWeekReportRef" @refresh-list="getDataList"/>
    </div>
</template>

<script setup>

import {useTemplateRef} from 'vue';
import {Delete, Download, Edit, Plus, View} from '@element-plus/icons-vue';
import AddAndEditPoliceServiceWeekReport
    from '@/views/StatisticAnalysis/PoliceServiceWeekReport/component/AddAndEditPoliceServiceWeekReport.vue';
import {
    deletePoliceServiceWeekReport,
    getPoliceServiceWeekReportTableList
} from '@/api/StatisticAnalysis/PoliceServiceWeekReport.js';
import DepartmentCascader from '@/components/DepartmentCascader/DepartmentCascader.vue';
import {ElMessageBox} from 'element-plus';
import useUserStore from '@/store/modules/user.js';
import {exportHandleXlsx} from '@/utils/export.js';

const queryParamsRef = useTemplateRef('queryParamsRef')
const PoliceServiceWeekReportRef = useTemplateRef('PoliceServiceWeekReportRef')
const tableDataRef = useTemplateRef('tableDataRef')

const {unifiedUserId, unitId} = useUserStore().info;


const loading = ref(false)
const total = ref(0)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: 10,
    isAsc: 'ascending',
    orderByColumn: 'unitName'
})
const defaultSort = ref({prop: 'unitName', order: 'descending'});
const sortOrders = reactive(['descending', 'ascending'])
const queryParams = ref({
    unitId: unitId || '',
    params: {
        beginTime: '',
        endTime: ''
    }
})
const searchTime = ref([]);

const tableData = ref([
    {
        unit: '撒的'
    }
])

onMounted(() => {
    getDataList()
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
/** 排序触发事件 */
const handleSortChange = (column, prop, order) => {
    paging.value.orderByColumn = column.prop;
    paging.value.isAsc = column.order;
    getDataList();
}

// 获取列表
const getDataList = async () => {
    loading.value = true;
    const res = await getPoliceServiceWeekReportTableList(queryParams.value, paging.value)
    total.value = res.total;
    tableData.value = res.rows;
    loading.value = false;
}

// 改变时间
const changeDateTimerHandle = (date) => {
    if (date) {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: date[0],
                endTime: date[1]
            }
        }
    } else {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: '',
                endTime: ''
            }
        }
    }

    getDataList()
}

// 删除应急处置
const deleteHandle = (row) => {
    ElMessageBox.confirm(
        '确定要删除此条动态吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await deletePoliceServiceWeekReport(row.jwPolicereportId)
        await getDataList()
    }).catch(() => {
    })
}

// 重置搜索
const resetQueryParamsHandle = async (elForm) => {
    if (!elForm) return
    elForm.resetFields()
    searchTime.value = []
    queryParams.value.params.beginTime = '';
    queryParams.value.params.endTime = '';
    tableDataRef.value.sort(defaultSort.value.prop, defaultSort.value.order);
    await getDataList()
}
</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

</style>